/**
* @file addContent.vue
* @author huang
* @date 2023/8/18
* @description Add a brief description of the file here.
* @projectName
* @email newflyhuang@gmail.com
*/

<template>
  <pure-dialog-template>
    <template #title>
      {{ title }}
    </template>
    <el-form ref="form" :model="form" :rules="rules" label-width="140px" size="small">
      <el-form-item label="字典类型">
        <el-input v-model="dictType" :disabled="true" />
      </el-form-item>
      <el-form-item v-if="isMultiLevel" label="上级">
        <el-select v-model="form.parentId" placeholder="请选择上级">
          <el-option v-for="item in optionDict" :key="item.dictCode" :value="item.dictCode" :label="item.dictLabel" />
        </el-select>
      </el-form-item>
      <el-form-item label="数据标签" prop="dictLabel">
        <el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
      </el-form-item>
      <el-form-item label="数据键值" prop="dictValue">
        <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
      </el-form-item>
      <el-form-item label="显示排序" prop="dictSort">
        <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio label="0">
            正常
          </el-radio>
          <el-radio label="1">
            停用
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </template>
  </pure-dialog-template>
</template>

<script>
import SystemDataDictionaryApi from '../api';
import { isEmpty, } from 'lodash-es';

export default {
  components: { },
  props: {
    title: {
      type: String,
      default: '添加数据',
    },
    dictType: {
      type: String,
      default: '',
    },
    dictLevel: {
      type: [
        String,
        Number,
      ],
      default: 0,
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 表单校验
      rules: {
        dictLabel: [
          { required: true, message: '数据标签不能为空', trigger: 'blur', },
        ],
        dictValue: [
          { required: true, message: '数据键值不能为空', trigger: 'blur', },
        ],
        dictSort: [
          { required: true, message: '数据顺序不能为空', trigger: 'blur', },
        ],
      },
      form: {
        createBy: '',
        createTime: '',
        // * 样式属性（其他样式扩展）
        cssClass: '',
        // * 字典编码
        dictCode: '',
        // * 字典标签
        dictLabel: '',
        // * 字典排序
        dictSort: '',
        // * 字典类型
        dictType: '',
        // * 字典键值
        dictValue: '',
        // * 是否默认（Y是 N否）
        isDefault: '',
        // * 表格字典样式
        listClass: '',
        params: '',
        // * 上级Id
        parentId: '',
        remark: '',
        // * 状态（0正常 1停用）
        status: '0',
        updateBy: '',
        updateTime: '',
      },
      optionDict: [],
    };
  },
  computed: {
    // 是否是多级字典
    isMultiLevel() {
      return Number(this.dictLevel) > 0;
    },

  },
  watch: {
    data: {
      handler(val) {
        if (isEmpty(val)) return;
        this.form = {
          ...val,
        };
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // this.form.parentId = this.data.dictId;
    this.getList();
  },
  methods: {
    async getList() {
      const rs = await SystemDataDictionaryApi.getDictionaryDataList({
        dictType: this.dictType,
        pageSize: 999,
        pageNum: 0,
      });
      console.log(rs);
      this.optionDict = rs.rows;
    },
    onDone() {
      this.$emit('done');
    },
    cancel() {
      this.onDone();
    },
    submitForm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // this.$emit('submit', this.formData);
          this.$delete(this.form, 'params');
          this.form.dictType = this.dictType;
          if (this.form?.dictCode) {
            await SystemDataDictionaryApi.updateDictionaryData(this.form);
          } else {
            await SystemDataDictionaryApi.addDictionaryDetail(this.form);
          }
          this.onDone();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
